<template>
	<ynet-content id="sysAuth" :headerInformation="true" :headerMenu="true">
        <div class="main-container">
			<ynet-breadcrumb></ynet-breadcrumb>
		</div>   
        <div>
            <el-dialog title="Tran Code" :visible.sync="bsnCodeTableVisible" :close-on-click-modal="false" :close-on-press-escape="false">
                <el-tree :props="defaultProps" :data="roleBsnList" node-key="bsnCode" ref="tree"
                show-checkbox 
                check-strictly 
                :default-expand-all="true"
                @check-change="handleSelectChange"
                >
                </el-tree>
                <div class="btnArea mt20 tac">
                    <el-button @click=" getBsnName()">Confirm</el-button>
                </div>
            </el-dialog>
        </div>
		<div class="main-container" >
            <el-form ref="queryForm" :model="queryForm" class="formEmbedTable mt20" :rules="rules">
                <table>
                    <caption>Enquiry</caption>
                    <tr colspan="3">	
                        <td>Tran Code</td>
                        <td >
                            <el-form-item prop="inputBsnName"><el-input v-model="queryForm.inputBsnName" @focus="cleanOther()"></el-input></el-form-item>
                            <span class="btnArea">
                                <el-button @click="queryBsnList()">Search</el-button>
                            </span>
                        </td>					
                    </tr>
                        <tr>
                        <td>Date：</td>
                        <td colspan="3">
                            <el-form-item  prop="startDateObj">
                            <el-date-picker v-model="queryForm.startDateObj" @change="queryForm.startTime=$tools.utils.formatDate(queryForm.startDateObj)" type="date" placeholder="Start time"></el-date-picker>
                            </el-form-item>
                            <span>TO</span>
                            <el-form-item  prop="endDateObj">
                            <el-date-picker v-model="queryForm.endDateObj" @change="queryForm.endTime=$tools.utils.formatDate(queryForm.endDateObj)" type="date" placeholder="End Time"></el-date-picker>
                            </el-form-item>               
                        </td>
                    </tr>	
                </table>
            </el-form>
            <div class="btnArea mt20 tac">
                <el-button type="primary" @click="query()">Search</el-button>
            </div>
            <div class="tableForm tableData mt20" width="100%">
                <el-table :data="authResultList" border >
                    <el-table-column label="Transaction Sequence No." prop="flowNo" align="center" width="300%"></el-table-column>  
                    <el-table-column label="Transaction Type" prop="bsnName" align="center"></el-table-column>  
                    
                    <el-table-column label="Submission Time" prop="submitTime" align="center">
                        <template scope="scope">
                            {{$tools.utils.formatDate(scope.row.submitTime,{"symbol":"YYYY-MM-DD HH:mm"})}}
                        </template>
                    </el-table-column>
                    <el-table-column label="Auth Operator" prop="authName" align="center"></el-table-column>  
                    <el-table-column label="Auth Time" prop="authTime" align="center">
                        <template scope="scope">
                            {{$tools.utils.formatDate(scope.row.authTime,{"symbol":"YYYY-MM-DD HH:mm"})}}
                        </template>
                    </el-table-column> 
                    <el-table-column label="Auth Result" prop="status" align="center">
                        <template scope="scope">
                            {{scope.row.status==0?"waiting auth":scope.row.status==1?"refuse":"approve"}}
                        </template>
                    </el-table-column>
                    <el-table-column label="reason" prop="rejReason" align="center"></el-table-column> 
                </el-table>
            </div>
            <div class="pagination tar mt20">
                <el-pagination  @current-change="handleCurrentChange" :current-page="Number(queryForm.currentPage)" :page-size="Number(queryForm.turnPageShowNum)" layout="total, prev, pager, next, jumper" :total="Number(turnPageTotalNum)">
                </el-pagination>
            </div>
		</div>
	</ynet-content>
</template>

<script>

	export default {
		name:'authResult',
		components:{
		},
        
		data(){
            return {
                turnPageTotalNum:'',bsnCodeTableVisible:false,
               rules:{
                    inputBranchNo:[
                        {trigger:'blur',message:'required',required:true},
                        {trigger:'blur',validator:this.$tools.validator.isEngNum},
                    ],
                    startDateObj: [
                        {trigger: 'blur', validator:this.$tools.validator.dateCompare,compareList:['startDateObj','endDateObj'],vm:this,formName:'queryForm'}
                    ],
                    endDateObj: [
                        {trigger: 'blur', validator:this.$tools.validator.dateCompare,compareList:['startDateObj','endDateObj'],vm:this,formName:'queryForm'}
                    ],
                },
                authResultList:[],
                queryForm:{
                    inputBsnCode:'',bsnCode:'IM0602',currentPage:'1',turnPageShowNum:'10',inputBsnName:'',
                    startDateObj:'',
                    endDateObj:'',
                    startTime:'',
                    endTime:'',
                },
                roleBsnList:[],
                defaultProps:{
                    children:'childrens',
                    label:'bsnName',
                },
               selectBsn:{},
            }   
        },
		methods:{ 
            query(){//查询频率控制
                this.queryForm.currentPage=1
                console.log("queryForm:"+JSON.stringify(this.queryForm))
                this.queryAuth()
            },
            handleCurrentChange(val) {//分页方法
                this.queryForm.currentPage=val;
                this.queryAuth()
            },
            queryAuth(){//打开某个单独菜单下的待审核信息
                console.log("queryForm:"+JSON.stringify(this.queryForm))
                this.$tools.request(this,'userLogin.do',this.queryForm).then(data=>{
                    console.log("待审核信息:"+JSON.stringify(data))
                    if(data.body.errorCode==0){
                        this.authResultList=data.body.authResultList;
                        this.turnPageTotalNum=data.body.turnPageTotalNum;
                    }else{
                        this.$alert("System Error Try again", "warning",{
                            confirmButtonText: 'Confirm',
                        })
                    }   
                })
                
            },
            getBsnName(){
                this.queryForm.inputBsnCode=this.selectBsn.bsnCode;
                this.queryForm.inputBsnName=this.selectBsn.bsnName;
                this.bsnCodeTableVisible=false;
            },
            handleSelectChange(data,checked){
                console.log("data:"+JSON.stringify(data))
                if(checked){
                    this.$refs.tree.setCheckedKeys([data.bsnCode])
                    this.selectBsn=$.extend(this.selectBsn,data);
                }
                
                
                console.log()
                //坚挺check状态
            },
            queryBsnList(){//查询角色菜单
                this.roleBsnList=this.$tools.storage.get("menu","save");
                this.roleBsnList.splice(0,1);
                this.bsnCodeTableVisible=true;
            },
            cleanOther() {
				let _this = this
				_this.$refs.queryForm.resetFields()
                //this.queryForm.inputUserNo='';
                _this.queryForm.inputBsnCode='';
                //this.imUserList=[];
			},
            
		}
	}
</script>
<style>
/*
    .el-table th {
        background: #aca2a0;
        color: #252222;
    }
    */
</style>